<!--
 * @Descripttion: 
 * @version: 
 * @Author: -ViJia
 * @Date: 2022-03-22 11:37:08
 * @LastEditors: -ViJia
 * @LastEditTime: 2022-03-23 18:25:52
-->
<template>
    <div class="Main">
        <div class="MainTitle flex align-center justify-between">
            订单详情
            <el-button type="primary" @click="DetailBack">
                返回
            </el-button>
        </div>
        <div class="MianContent" v-if="isHide">
            <div class="MainTopAction">
                <div class="mx-200 mb-20" style="flex: 1;" v-if="info != ''">
                    <a-steps :current="status" labelPlacement="vertical">
                        <a-step title="买家下单" :description="info.create_time" />
                        <a-step title="买家付款" :description="info.pay_time" />
                        <a-step title="商家发货" :description="info.send_time" />
                        <a-step title="订单完成" :description="info.finish_time" />
                    </a-steps>
                </div>
            </div>
            <div v-if="info.order_status" class="flex py-50 mb-20 align-center justify-center" style="background: #f9f7f5;">
                <div class="flex align-center">
                    <Icon type="clock-circle" style="font-size: 50px;color: #DDA955;" />
                    <div class="ml-10">
                        <div style="color: #000;font-size: 18px;">订单状态：{{info.order_status=='1'?'待付款':info.order_status=='2'?'待发货':info.order_status=='3'?'待收货':info.order_status=='4'?'已完成':'已关闭'}}</div>
                        <div v-if="info.order_status=='2'">买家已付款 请商家尽快发货</div>
                    </div>
                </div>
            </div>
            <div class="mb-20" style="color: #000;font-size: 20px;">详细信息</div>
            <div class="mb-20" style="width: 450px;background: #fff;">
                <div class="flex align-center justify-between mb-10">
                    <div>
                        <span style="color: #999999;">订单编号：</span>
                        <span>{{info.order_code}}</span>
                    </div>
                    <div>
                        <span style="color: #999999;">买家：</span>
                        <span>{{info.nickname}}</span>
                    </div>
                </div>
                <div class="mb-10 flex align-center justify-between">
                    <div class="flex align-center" style="flex: 1;">
                        <span style="color: #999999;">收货信息：</span>
                        <span style="flex: 1;">{{info.province}} {{info.city}} {{info.area}} {{info.address}} {{info.name}} {{info.mobile}}</span>
                    </div>
                    <!-- <span style="color: #DDA955;cursor: pointer;">复制</span> -->
                </div>
                <div class="flex align-center justify-between">
                    <div>
                        <span style="color: #999999;">收款方式：</span>
                        <span>{{info.pay_type=='1'?'微信支付':info.pay_type=='2'?'线下支付':''}}</span>
                    </div>
                    <div>
                        <span style="color: #999999;">配送方式：</span>
                        <span>{{info.move_way=='1'?'快递':info.move_way=='2'?'自提':''}}</span>
                    </div>
                    <div>
                        <span style="color: #999999;">精英管家：</span>
                        <span>{{info.steward &&info.steward.type == 1?'超级管家':info.steward &&info.steward.type == 2?'超级政委':'精英管家'}}</span>
                    </div>
                </div>
            </div>
            <div class="mb-20" style="color: #000;font-size: 20px;">商品信息</div>
            <div class="mb-20">
                <Table :columns="listfields" :data-source="listData" :bordered="false" size="middle" :pagination="false">
                    <div slot="status" slot-scope="row, index">
                        {{row.order_status=='1'?'待付款':row.order_status=='2'?'待发货':row.order_status=='3'?'待收货':row.order_status=='4'?'已完成':row.order_status=='5'? '已关闭':'售后中'}}
                    </div>
                    <div slot="product" slot-scope="row, index" style="margin: 0!important;display: flex;justify-content: center;">
                        <div class="flex align-center">
                            <img :src="index.main_imgurl.path" style="width: 50px;height: 50px;border-radius: 10px;overflow: hidden;border: 1px solid #c5c3c3;">
                            <div style="margin-left: 15px;">
                                <div>{{index.product_title}}</div>
                                <div style="text-align: left;">规格：
                                    <el-tag v-for="(items,index) in index.attr_params" :key="index" color="#108ee9">
                                        {{items.value}}
                                    </el-tag>
                                </div>
                            </div>
                        </div>
                    </div>
                </Table>
            </div>
            <div class="flex justify-end">
                <div>
                    <div class="flex align-center mb-2">
                        <div style="width: 100px;text-align: right;color: #999999;">商品小计：</div>
                        <span style="color:#565656;">¥{{info.price}}</span>
                    </div>
                    <div class="flex align-center mb-2">
                        <div style="width: 100px;text-align: right;color: #999999;">运费：</div>
                        <span style="color:#565656;">¥{{info.move_price}}</span>
                    </div>
                    <div class="flex align-center mb-2">
                        <div style="width: 100px;text-align: right;color: #565656;">总价：</div>
                        <span style="color: #ec5e53;">¥{{info.price}}</span>
                    </div>
                    <div class="flex align-center">
                        <div style="width: 100px;text-align: right;color: #565656;">已付定金：</div>
                        <span style="color: #ec5e53;">¥{{info.deposit_price}}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapGetters, mapState, mapActions } from 'vuex';
    // import { showErrors, showError, showSuccess } from '@/utils/showMsg';
    import { OrderInfo } from '@/components/superSteward/Order/Columns/Order'
    import Pagination from '@/common/pagination.vue'
    import Table from 'ant-design-vue/lib/table';
    import Icon from 'ant-design-vue/lib/icon';
    import 'ant-design-vue/lib/table/style/css'; // 或者 ant-design-vue/lib/button/style/css 加载 css 文件

    export default {
        name: 'list',
        components: {
            Pagination,
            Table,
            Icon
        },
        data() {
            return {
                total: 0, //定义初始有多少条数据
                pageno: 1, //默认第几页
                pagesize: 10, //一页显示多少条数据
                listfields: OrderInfo, //表头列表
                listData: [], //表格数据
                status: '',
                info: '',
                isHide: true
            };
        },
        computed: {
            ...mapState({
                // listfields: state => state.Operator.fields, //获取table头
            }),
        },
        created() {},
        mounted() {
            let that = this
            let id = this.$route.query.id;
            if (this.$route.query.back == 'OrderList') {
                that.GetOrderDetail(id)//商品订单
            } else {
                that.GetProductDetail(id)//产品包订单
            }
        },
        methods: {
            ...mapActions({
                // GetFields: 'Operator/GetFields', //获取table头
            }),
            async GetProductDetail(row) {
                let that = this
                let params = {
                    id: row,
                }
                const res = await that.$http.post('/api/root/StewardOrder/getPackOrderDetail',params)
                if (res.code == '1') {
                    const data = res.data
                    data['create_time'] = data.create_time ? that.$moment(data.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['pay_time'] = data.pay_time ? that.$moment(data.pay_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['send_time'] = data.send_time ? that.$moment(data.send_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['finish_time'] = data.finish_time ? that.$moment(data.finish_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    if (data.product_list.length > 0) {
                        data.product_list.forEach((item, index) => {
                            item.key = item.id
                            item.prices = item.price
                        })
                    }
                    that.info = data
                    that.status = data.order_status - 1
                    that.listData = data.product_list
                    setTimeout(() => {
                        that.isHide = true
                    })
                } else {
                    showError(res.data.msg)
                }
            },
            async GetOrderDetail(row) {
                let that = this
                let params = {
                    id: row,
                }
                const res = await that.$http.post('/api/root/StewardOrder/getProductOrderDetail',params)
                if (res.code == '1') {
                    const data = res.data
                    data['create_time'] = data.create_time ? that.$moment(data.create_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['pay_time'] = data.pay_time ? that.$moment(data.pay_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['send_time'] = data.send_time ? that.$moment(data.send_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    data['finish_time'] = data.finish_time ? that.$moment(data.finish_time * 1000).format('YYYY-MM-DD  HH:mm:ss') : ''; //时间戳转换成时间
                    if (data.product_list.length > 0) {
                        data.product_list.forEach((item, index) => {
                            item.key = item.id
                            item.prices = item.price
                        })
                    }
                    that.info = data
                    that.status = data.order_status - 1
                    that.listData = data.product_list
                    setTimeout(() => {
                        that.isHide = true
                    })
                } else {
                    showError(res.data.msg)
                }
            },
            DetailBack() {
              // let query = this.$route.query
              // if(query.params){
              // 	this.$router.push({
              // 	    name: query.back,
              // 		query: { choose_id: query.params.choose_id, steward_id: query.params.steward_id }
              // 	});
              // }else{
              // this.$router.push({
                  // name: query.back,
              // });
              this.$router.back(1)
            },
            //分页器 
            handlePageChange(pageno, pagesize) { //点击第几页触发的函数
                this.pageno = pageno;
                this.pagesize = pagesize;
                this.GetList(); //这个是向后台请求的数据函数
            },
            //切换每页显示多少条
            onShowSizeChange(current, size) { //改变每页显示条目数的函数
                //pagesize 变化的回调
                this.pageno = current;
                this.pagesize = size;
                this.GetList(); //这个是向后台请求的数据函数
            },
        },
    };
</script>

<style scoped lang="less">
.Main {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;

  .MainTitle {
    font-size: 24px;
    color: #333;
    margin: 10px 20px;
    position: relative;
  }

  .MainTitle:before {
    content: "";
    width: 40px;
    height: 12px;
    background: linear-gradient(
      270deg,
      rgba(0, 158, 238, 0) 0%,
      rgba(221, 169, 85, 0.3) 100%
    );
    position: absolute;
    bottom: 2px;
    left: 0;
  }

  .MianContent {
    padding: 10px 20px 20px 20px;

    .MainTopAction {
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      justify-content: space-between;
    }
  }
}
</style>